<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>Metro · BootMetro</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <!--<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">-->
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-responsive.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="content/css/datepicker.css">
   <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons-ie7.css">
   <![endif]-->

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="content/css/demo.css">
   <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="content/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="scripts/modernizr-2.6.2.min.js"></script>

   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
</head>

<body>
   <!--[if lt IE 7]>
   <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
   <![endif]-->

   <!-- Subhead
   ================================================== -->
   <header id="nav-bar" class="container">
      <div class="row">
         <div class="span12">
            <div id="header-container">
               <a id="backbutton" class="win-backbutton" href="./hub.html"></a>
               <h5>BootMetro</h5>
               <div class="dropdown">
                  <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#" >
                     BootMetro Components
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                  <li><a href="./metro-layouts.html">Metro Layouts</a></li>
                  <li><a href="./hub.html">Hub</a></li>
                  <li><a href="./tiles-templates.html">Tile Templates</a></li>
                  <li><a href="./listviews.html">ListViews</a></li>
                  <li><a href="./appbar-demo.html">App-Bar Demo</a></li>
                  <li><a href="./table.html">Table Demo</a></li>
                  <li><a href="./wizard.html">Wizard</a></li>
                  <li><a href="./icons.html">Icons</a></li>
                  <li><a href="./toast.html">Toast Notifications</a></li>
                  <li><a href="./pivot.html">Pivot</a></li>
                  <li><a href="./metro-components.html">Metro Components</a></li>
                  <li class="divider"></li>
                  <li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
                  <li><a href="./base-css.html">Bootstrap Base CSS</a></li>
                  <li><a href="./components.html">Bootstrap Components</a></li>
                  <li><a href="./javascript.html">Bootstrap Javascript</a></li>
                  <li class="divider"></li>
                  <li><a href="./index.html">Home</a></li>
               </ul>
            </div>
            </div>
            <div id="top-info" class="pull-right">
               <a id="settings" class="pull-right" href="#">
                  <b class="icon-settings"></b>
               </a>
            </div>
         </div>
      </div>
   </header>
   <div class="container">
      <p class="lead">Here we have various Metro specific components.</p>
   </div>
   
   <div class="container">
   
      <!-- Docs nav
      ================================================== -->
      <div class="row">
         <div class="span3 bs-docs-sidebar">
            <ul class="nav nav-list bs-docs-sidenav">
               <li><a href="#progress"><i class="icon-chevron-right"></i> Metro Progress Bars</a></li>
               <li><a href="#modals"><i class="icon-chevron-right"></i> Modal</a></li>
               <li><a href="#datepicker"><i class="icon-chevron-right"></i> DatePicker</a></li>
               <li><a href="#flipview"><i class="icon-chevron-right"></i> FlipView</a></li>
            </ul>
         </div>
         <div class="span9">
   
            <!-- Progress bars
            ================================================== -->
            <section id="progress">
               <div class="page-header">
                  <h1>Metro Progress Bars <small>For loading, redirecting, or action status</small></h1>
               </div>
   
               <h2>Examples and markup</h2>
   
               <h3>Determinate</h3>
               <p>Use the determinate progress bar style when a task is determinate, that is when it has a well-defined duration or a predictable end.</p>
               <div class="bs-docs-example">
                  <div class="progress">
                     <div class="bar" style="width: 60%;"></div>
                  </div>
               </div>
            <pre class="prettyprint linenums">
            &lt;div class="progress"&gt;
              &lt;div class="bar" style="width: 60%;"&gt;&lt;/div&gt;
            &lt;/div&gt;
            </pre>
   
               <h3>Indeterminate</h3>
               <p>Use this style for tasks that are not determinate that are non-modal (don't block user interaction).</p>
               <div class="bs-docs-example">
                  <div class="progress progress-indeterminate">
                     <div class="bar"></div>
                  </div>
               </div>
            <pre class="prettyprint linenums">
            &lt;div class="progress progress-indeterminate"&gt;
              &lt;div class="bar"&gt;&lt;/div&gt;
            &lt;/div&gt;
            </pre>
   
               <h3>Indeterminate Ring</h3>
               <p>Use this style for tasks that are not determinate that are non-modal (don't block user interaction).</p>
               <div class="bs-docs-example">
                  <div class="progress progress-indeterminate">
                     <div class="win-ring small"></div>
                  </div>
               </div>
            <pre class="prettyprint linenums">
            &lt;div class="progress progress-indeterminate"&gt;
              &lt;div class="win-ring small"&gt;&lt;/div&gt;
            &lt;/div&gt;
            </pre>
   
            </section>
   
   
   
            <!-- Modal
            ================================================== -->
            <section id="modals">
               <div class="page-header">
                  <h1>Modals <small>bootstrap-modal.js</small></h1>
               </div>
   
   
               <h2>Examples</h2>
               <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
   
               <h3>Static example</h3>
               <p>A rendered modal with header, body, and set of actions in the footer.</p>
               <div class="bs-docs-example" style="background-color: #f5f5f5;">
                  <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h3>Modal header</h3>
                     </div>
                     <div class="modal-body">
                        <p>One fine body&hellip;</p>
                     </div>
                     <div class="modal-footer">
                        <a href="#" class="btn">Close</a>
                        <a href="#" class="btn btn-primary">Save changes</a>
                     </div>
                  </div>
               </div>
            <pre class="prettyprint linenums">
            &lt;div class="modal hide fade"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                &lt;h3&gt;Modal header&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;p&gt;One fine body&hellip;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
                &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            </pre>
   
               <h3>Live demo</h3>
               <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
               <p>To show a Metro style message dialog, add a class <code>message</code>.</p>
               <p>To show a Metro style warning or error dialog, add a class <code>warning</code>.</p>
               <!-- sample modal content -->
               <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                     <h3 id="myModalLabel">Modal Heading</h3>
                  </div>
                  <div class="modal-body">
                     <h4>Text in a modal</h4>
                     <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
   
                     <h4>Popover in a modal</h4>
                     <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>
   
                     <h4>Tooltips in a modal</h4>
                     <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
   
                     <hr>
   
                     <h4>Overflowing text to show optional scrollbar</h4>
                     <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
                     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                     <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                     <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                     <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                  </div>
                  <div class="modal-footer">
                     <button class="btn" data-dismiss="modal">Close</button>
                     <button class="btn btn-primary">Save changes</button>
                  </div>
               </div>
               <div id="myModal2" class="modal message hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                     <h3>Modal Heading</h3>
                  </div>
                  <div class="modal-body">
                     <h4>Text in a modal</h4>
                     <p>Do you want to turn on location services so Microsoft can use your location ?</p>
                  </div>
                  <div class="modal-footer">
                     <button class="btn" data-dismiss="modal">Close</button>
                     <button class="btn btn-primary">Save changes</button>
                  </div>
               </div>
               <div id="myModal3" class="modal warning bg-color-blu hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-body">
                     <p>The new product cannot be saved due to an error. A log message has been emailed to you.</p>
                  </div>
                  <div class="modal-footer">
                     <button class="btn btn-large" data-dismiss="modal">Close</button>
                  </div>
               </div>
               <div class="bs-docs-example" style="padding-bottom: 24px;">
                  <a data-toggle="modal" href="#myModal" class="btn btn-primary">Show Flyout (classic modal)</a>
                  <a data-toggle="modal" href="#myModal2" class="btn btn-success">Show Metro Message</a>
                  <a data-toggle="modal" href="#myModal3" class="btn btn-warning">Show Error/Warning</a>
               </div>
   
            <pre class="prettyprint linenums">
            &lt!-- Button to trigger modal --&gt;
            &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
   
            &lt!-- Modal --&gt;
            &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;/button&gt;
                &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;p&gt;One fine body&hellip;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
                &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            </pre>
   
   
               <hr class="bs-docs-separator">
   
   
               <h2>Usage</h2>
   
               <h3>Via data attributes</h3>
               <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p>
               <pre class="prettyprint linenums">&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
   
               <h3>Via JavaScript</h3>
               <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p>
               <pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
   
               <h3>Options</h3>
               <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
               <table class="table table-bordered table-striped">
                  <thead>
                     <tr>
                        <th style="width: 100px;">Name</th>
                        <th style="width: 50px;">type</th>
                        <th style="width: 50px;">default</th>
                        <th>description</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>backdrop</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
                     </tr>
                     <tr>
                        <td>keyboard</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>Closes the modal when escape key is pressed</td>
                     </tr>
                     <tr>
                        <td>show</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>Shows the modal when initialized.</td>
                     </tr>
                     <tr>
                        <td>remote</td>
                        <td>path</td>
                        <td>false</td>
                        <td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
                           <pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
                     </tr>
                  </tbody>
               </table>
   
               <h3>Methods</h3>
               <h4>.modal(options)</h4>
               <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
            <pre class="prettyprint linenums">
            $('#myModal').modal({
              keyboard: false
            })
            </pre>
               <h4>.modal('toggle')</h4>
               <p>Manually toggles a modal.</p>
               <pre class="prettyprint linenums">$('#myModal').modal('toggle')</pre>
               <h4>.modal('show')</h4>
               <p>Manually opens a modal.</p>
               <pre class="prettyprint linenums">$('#myModal').modal('show')</pre>
               <h4>.modal('hide')</h4>
               <p>Manually hides a modal.</p>
               <pre class="prettyprint linenums">$('#myModal').modal('hide')</pre>
               <h3>Events</h3>
               <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
               <table class="table table-bordered table-striped">
                  <thead>
                     <tr>
                        <th style="width: 150px;">Event</th>
                        <th>Description</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>show</td>
                        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
                     </tr>
                     <tr>
                        <td>shown</td>
                        <td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
                     </tr>
                     <tr>
                        <td>hide</td>
                        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
                     </tr>
                     <tr>
                        <td>hidden</td>
                        <td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
                     </tr>
                  </tbody>
               </table>
            <pre class="prettyprint linenums">
            $('#myModal').on('hidden', function () {
              // do something…
            })
            </pre>
            </section>
   
   
   
            <!-- DatePicker
            ================================================== -->
            <section id="datepicker">
               <div class="page-header">
                  <h1>DatePicker <small></small></h1>
               </div>
               <p>Code from: <a href="http://www.eyecon.ro/bootstrap-datepicker/">http://www.eyecon.ro/bootstrap-datepicker/</a></p>
   
               <p>Attached to a field with the format specified via options.</p>
               <div class="bs-docs-example">
                  <input type="text" id="dp1" value="02-16-2012" class="span2 datepicker">
               </div>
            <pre class="prettyprint linenums">
            &lt;input type="text" id="dp1" value="02-16-2012" class="span2 datepicker"&gt;
            </pre>
   
               <p>Attachet to a field with the format specified via data tag.</p>
               <div class="bs-docs-example">
                  <input type="text" id="dp2" data-date-format="mm/dd/yy" value="02/16/12" class="span2 datepicker">
               </div>
            <pre class="prettyprint linenums">
            &lt;input type="text" id="dp2" data-date-format="mm/dd/yy" value="02-16-2012" class="span2 datepicker"&gt;
            </pre>
   
               <p>As component.</p>
               <div class="bs-docs-example">
                  <div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append datepicker">
                     <input type="text" readonly="" value="12-02-2012" size="16" class="span2">
                     <span class="add-on"><i class="icon-calendar"></i></span>
                  </div>
               </div>
            <pre class="prettyprint linenums">
            &lt;div data-date-format="dd-mm-yyyy" data-date="12-02-2012" id="dp3" class="input-append datepicker"&gt;
               &lt;input type="text" readonly="" value="12-02-2012" size="16" class="span2"&gt;
               &lt;span class="add-on"&gt;&lt;i class="icon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
               &lt;/div&gt;
            </pre>
   
            </section>
   
   
   
            <!-- FlipView
            ================================================== -->
            <section id="flipview">
               <div class="page-header">
                  <h1>FlipView <small></small></h1>
               </div>
               <p>The FlipView control lets flip through views or items one at a time. Flip buttons appear on mouse hover and let people flip to the next or previous item.</p>
               <p>
                  <span class="label label-info">Note:</span> The FlipView control is a customization of the <a href="./javascript.html#carousel">Carousel</a> component, so it requires the carousel javascript plugin.
               </p>
   
   
               <h2>Example carousel</h2>
               <p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
               <div class="bs-docs-example">
                  <div class="row">
                     <div class="span4">
                        <div id="myFlipview" class="carousel flipview slide span4">
                           <div class="carousel-inner">
                              <div class="item active">
                                 <img src="content/img/sample-1.jpg" alt="">
                                 <div class="carousel-caption">
                                    <h4>First Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                 </div>
                              </div>
                              <div class="item">
                                 <img src="content/img/sample-2.jpg" alt="">
                                 <div class="carousel-caption">
                                    <h4>Second Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                 </div>
                              </div>
                              <div class="item">
                                 <img src="content/img/sample-3.jpg" alt="">
                                 <div class="carousel-caption">
                                    <h4>Third Thumbnail label</h4>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                 </div>
                              </div>
                           </div>
                           <a class="left carousel-control" href="#myCarousel" data-slide="prev">&#xe0f4;</a>
                           <a class="right carousel-control" href="#myCarousel" data-slide="next">&#xe0f1;</a>
                        </div>
                     </div>
                  </div>
               </div>
   <pre class="prettyprint linenums">
   &lt;div id="myCarousel" class="carousel flipview slide"&gt;
     &lt;!-- Carousel items --&gt;
     &lt;div class="carousel-inner"&gt;
       &lt;div class="active item"&gt;…&lt;/div&gt;
       &lt;div class="item"&gt;…&lt;/div&gt;
       &lt;div class="item"&gt;…&lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- Carousel nav --&gt;
     &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
     &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
   &lt;/div&gt;
   </pre>
   
            </section>
   
         </div>
      </div>
   </div>   <div id="charms" class="win-ui-dark slide">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-backbutton"></a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.3.min.js'>\x3C/script>")</script>

   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-panorama.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-pivot.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/bootstrap-datepicker.js"></script>
   <!--<script type="text/javascript" src="scripts/jquery.nicescroll.js"></script>-->
   <script type="text/javascript" src="scripts/jquery.touchSwipe.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>
   <script type="text/javascript">
      $('.panorama').panorama({
         nicescroll: false,
         showscrollbuttons: true,
         keyboard: true
      });

      $('#pivot').pivot();
   </script>
</body>
</html>
